<template>
	<view class="fui-wrap">
		<view class="fui-chat__list" :class="{'fui-chat__pbm':faceShow}">
			<view class="fui-chat__item">
				<fui-avatar src="/static/images/chat/avatar/img_avatar_2.png"></fui-avatar>
				<view class="fui-content__box">
					<text class="fui-content__text">FirstUI GPT机器人聊天地址：chatgpt.firstui.cn，使用微信打开链接即可体验！</text>
				</view>
			</view>
			<view class="fui-chat__item fui-item__right">
				<fui-avatar src="/static/images/chat/avatar/img_avatar_1.png"></fui-avatar>
				<view class="fui-content__box">
					<text class="fui-content__text">Can't wait to try it out! 😍😍</text>
				</view>
			</view>

			<!-- 图片 -->
			<view class="fui-chat__item">
				<fui-avatar src="/static/images/chat/avatar/img_avatar_2.png"></fui-avatar>
				<view class="fui-content__box">
					<image src="/static/images/imface/emoji_11.png" class="fui-chat__img" mode="widthFix"></image>
				</view>
			</view>
			<!-- 语音 -->
			<view class="fui-chat__item fui-item__right">
				<fui-avatar src="/static/images/chat/avatar/img_avatar_1.png"></fui-avatar>
				<view class="fui-content__box">
					<view class="fui-audio__box">
						<!-- play -->
						<image class="fui-icon__audio" src="/static/images/chat/suspend.png" mode="widthFix"></image>
						<text class="fui-time">00:21</text>
					</view>
					<view class="fui-op__icon">
						<fui-icon name="warning-fill" :size="52" color="#F75555"></fui-icon>
					</view>
				</view>
			</view>

			<view class="fui-chat__item">
				<fui-avatar src="/static/images/chat/avatar/img_avatar_2.png"></fui-avatar>
				<view class="fui-content__box">
					<text class="fui-content__text">FirstUI GPT机器人聊天地址：chatgpt.firstui.cn，使用微信打开链接即可体验！</text>
				</view>
			</view>

		</view>

		<!-- #ifdef APP-NVUE -->
		<view class="fui-chatbar__fixed" :style="{transform: `translateY(${faceShow?0:translateY})px`}">
			<!-- #endif -->
			<!-- #ifndef APP-NVUE -->
			<view class="fui-chatbar__fixed" :class="[faceShow?'fui-face__show':'fui-face__hidden']">
				<!-- #endif -->
				<view class="fui-chatbar__wrap">
					<view class="fui-chatbar__icon-box" @tap="openPopup">
						<fui-icon name="plussign"></fui-icon>
					</view>
					<view class="fui-chatbar__icon-box fui-chatbar__pdl" @tap.stop="faceChange">
						<fui-icon name="face"></fui-icon>
					</view>
					<view class="fui-chatbar__input-box">
						<textarea ref="textareaRef" :fixed="true" auto-height :show-count="false"
							disable-default-padding confirm-type="send" class="fui-chatbar__input"
							:cursor-spacing="spacing" @focus="focusChange" @blur="blurChange" v-model="msg"></textarea>
						<view class="fui-chatbar__voice" v-if="!isVoice">
							<text class="fui-chatbar__voice-text">按住 说话</text>
						</view>
					</view>
					<view class="fui-chatbar__icon-box" @click="change">
						<fui-icon :name="isVoice?'voice':'keyboard'" v-if="!isSend"></fui-icon>
						<image class="fui-btn__send" src="/static/images/chat/send.png" v-else></image>
					</view>
				</view>
				<view class="fui-scroll__box">
					<scroll-view scroll-y class="fui-face__box" :style="{opacity:faceShow?1:0}">
						<view class="fui-face__inner">
							<text class="fui-face__text fui--active" v-for="(item,index) in faceList" :key="index"
								@click="faceClick(item)">{{item}}</text>
						</view>
					</scroll-view>
					<view class="fui-del__box" @tap.stop="delMsg">
						<fui-icon name="backspace" :size="56"></fui-icon>
					</view>
				</view>
			</view>

			<fui-bottom-popup :show="show" @close="closePopup">
				<view class="fui-custom__wrap">
					<view class="fui-op__list">
						<view class="fui-op__item fui--active" v-for="(item,index) in opList" :key="index">
							<image class="fui-op--img" :src="`/static/images/chat/img_${item.src}.png`"></image>
							<text class="fui-op--text">{{item.text}}</text>
						</view>
					</view>
					<view class="fui-icon__close fui--active" @tap="closePopup">
						<fui-icon name="close" :size="52"></fui-icon>
					</view>
				</view>
			</fui-bottom-popup>
		</view>
</template>

<script>
	import faceList from './emoji.js'

	export default {
		data() {
			let spacing = 16
			// #ifdef APP-NVUE
			spacing = 6
			// #endif
			return {
				opList: [{
					src: 'doc',
					text: '文件'
				}, {
					src: 'camera',
					text: '拍摄'
				}, {
					src: 'pic',
					text: '照片'
				}, {
					src: 'addr',
					text: '位置'
				}, {
					src: 'user',
					text: '联系人'
				}, {
					src: 'audio',
					text: '语音输入'
				}],
				faceList,
				spacing,
				//keyboard
				isVoice: true,
				focus: false,
				faceShow: false,
				msg: '',
				show: false,
				isSend: false,
				//vue3 & nvue下 rpx失效
				translateY: uni.upx2px(520)
			}
		},
		watch: {
			msg(newValue, oldValue) {
				if (newValue) {
					this.isSend = true
				} else {
					this.isSend = false
				}
			}
		},
		methods: {
			change() {
				if (this.msg) {
					uni.fui.toast('发送信息！')
					this.msg = ''
				} else {
					this.isVoice = !this.isVoice;
					this.faceShow = false;
					uni.hideKeyboard()
					// #ifdef APP-NVUE
					this.$refs.textareaRef.blur()
					// #endif
				}
			},
			focusChange() {
				this.focus = true;
			},
			blurChange() {
				this.focus = false
			},
			faceChange() {
				this.faceShow = !this.faceShow;
				if (this.faceShow) {
					this.isVoice = true;
				}
				uni.hideKeyboard()
				// #ifdef APP-NVUE
				this.$refs.textareaRef.blur()
				// #endif
			},
			faceClick(item) {
				if (!this.faceShow) return;
				this.msg += item;
			},
			openPopup() {
				this.show = true
				this.faceShow = false
				uni.hideKeyboard()
				// #ifdef APP-NVUE
				this.$refs.textareaRef.blur()
				// #endif
			},
			closePopup() {
				this.show = false
			},
			delMsg() {
				if (!this.msg) return;
				let number = 1;
				if (this.msg.length > 1) {
					number = this.msg.substr(this.msg.length - 2, this.msg.length).search(
						/(\ud83c[\udf00-\udfff])|(\ud83d[\udc00-\ude4f])|(\ud83d[\ude80-\udeff])/i) == -1 ? 1 : 2;
				}
				this.msg = this.msg.substr(0, this.msg.length - number);
			}
		}
	}
</script>

<style>
	.fui-wrap {
		padding-bottom: 108rpx;
	}

	.fui-chat__list {
		/* #ifndef APP-NVUE */
		width: 100%;
		white-space: pre-wrap;
		word-break: break-all;
		/* #endif */
		padding-top: 48rpx;
	}

	.fui-chat__pbm {
		padding-bottom: 540rpx;
	}

	.fui-chat__item {
		/* #ifndef APP-NVUE */
		width: 100%;
		display: flex;
		box-sizing: border-box;
		/* #endif */
		/* #ifdef APP-NVUE */
		width: 750rpx;
		/* #endif */
		padding-left: 24rpx;
		padding-right: 120rpx;
		margin-bottom: 48rpx;
		flex-direction: row;
		overflow: hidden;
	}

	.fui-content__box {
		flex: 1;
		margin-left: 24rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		word-break: break-all;
		white-space: pre-wrap;
		/* #endif */
		flex-direction: row;
		align-items: center;

	}

	.fui-content__text {
		font-size: 32rpx;
		color: #212121;
		/* #ifndef APP-NVUE */
		white-space: pre-wrap;
		word-break: break-all;
		box-sizing: border-box;
		/* #endif */
		padding: 20rpx 24rpx;
		background-color: #f8f8f8;
		border-radius: 8rpx 32rpx 32rpx 32rpx;
		/* #ifdef APP-NVUE */
		/* 警告但有效 */
		max-width: 486rpx;
		/* #endif */
	}

	.fui-item__right {
		padding-left: 120rpx;
		padding-right: 24rpx;
		flex-direction: row-reverse;
	}

	.fui-item__right .fui-content__box {
		margin-left: 0;
		margin-right: 24rpx;
		flex-direction: row-reverse;
	}

	.fui-item__right .fui-content__text {
		border-radius: 32rpx 8rpx 32rpx 32rpx;
		background-color: #246BFD;
		color: #fff;
	}

	.fui-chat__img {
		width: 160rpx;
		height: 160rpx;
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
	}

	.fui-audio__box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		align-items: center;
		height: 80rpx;
		border-radius: 40rpx;
		background: rgba(36, 107, 253, 0.08);
		padding: 0 48rpx 0 32rpx;
	}

	.fui-icon__audio {
		width: 32rpx;
		height: 32rpx;
	}

	.fui-time {
		font-size: 24rpx;
		line-height: 24rpx;
		padding-left: 16rpx;
		color: #246BFD;
	}

	.fui-op__icon {
		/* #ifndef APP-NVUE */
		flex-shrink: 0;
		/* #endif */
		padding-left: 12rpx;
	}

	.fui-item__right .fui-op__icon {
		padding-right: 12rpx;
	}

	.fui-chatbar__wrap {
		/* #ifndef APP-NVUE */
		width: 100%;
		display: flex;
		/* #endif */
		padding: 6px 0;
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		background: #FAFAFA;
	}

	.fui-chatbar__input-box {
		/* #ifndef APP-NVUE */
		width: 100%;
		display: flex;
		/* #endif */
		flex-direction: row;
		flex: 1;
		position: relative;
	}

	.fui-chatbar__input {
		/* #ifndef APP-NVUE || MP-ALIPAY || MP-QQ */
		width: 100%;
		min-height: 32rpx;
		box-sizing: content-box;
		padding: 20rpx;
		/* #endif */
		/* #ifdef MP-ALIPAY || MP-QQ */
		line-height: 1;
		min-height: 72rpx;
		/* #endif */
		flex: 1;
		/* #ifdef APP-NVUE */
		/* #ifdef VUE2 */
		min-height: 72rpx;
		/* #endif */
		height: 72rpx;
		padding: 16rpx 20rpx;
		/* #endif */
		border-radius: 8rpx;
		font-size: 32rpx;
		background: #fff;
	}

	.fui-chatbar__voice {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: #fff;
		border-radius: 8rpx;
		text-align: center;
		/* #ifndef APP-NVUE */
		display: flex;
		z-index: 10;
		/* #endif */
		align-items: center;
		justify-content: center;
		/* #ifdef H5 */
		cursor: pointer;
		/* #endif */
	}

	.fui-chatbar__voice:active {
		background-color: #ddd;
	}

	.fui-chatbar__voice-text {
		text-align: center;
		font-weight: bold;
		font-size: 32rpx;
	}

	.fui-chatbar__icon-box {
		height: 72rpx;
		padding: 0 16rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		flex-shrink: 0;
		/* #endif */
		align-items: center;
		justify-content: center;
		/* #ifdef H5 */
		cursor: pointer;
		/* #endif */
	}

	.fui-chatbar__icon-box:active {
		opacity: .5;
	}

	.fui-btn__send {
		width: 64rpx;
		height: 64rpx;
	}

	.fui-chatbar__pdl {
		padding-left: 0;
	}

	.fui-chatbar__fixed {
		width: 750rpx;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		/* #ifndef APP-NVUE */
		z-index: 10;
		transition: all 0.2s ease-in-out;
		/* #endif */
		background-color: #f8f8f8;
		/* #ifdef APP-NVUE */
		transition-property: transform;
		transition-duration: 0.2s;
		/* #endif */
	}

	/* vue3 rpx 不能自动转换？ */
	.fui-face__hidden {
		/* #ifndef APP-NVUE */
		transform: translate3d(0, 520rpx, 0);
		/* #endif */
	}


	.fui-face__show {
		/* #ifndef APP-NVUE */
		transform: translate3d(0, 0, 0);
		/* #endif */

		/* #ifdef APP-NVUE */
		transform: translateY(0);
		/* #endif */
	}


	.fui-scroll__box {
		position: relative;
	}

	.fui-face__box {
		/* #ifndef APP-NVUE */
		width: 100%;
		/* #endif */
		/* #ifdef APP-NVUE */
		width: 750rpx;
		/* #endif */
		height: 520rpx;
		background-color: #f8f8f8;
	}

	.fui-face__inner {
		/* #ifndef APP-NVUE */
		width: 100%;
		display: flex;
		box-sizing: border-box;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
		padding: 32rpx 2rpx;
	}

	.fui-face__text {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		width: 106rpx;
		font-size: 60rpx;
		padding: 16rpx 0;
		text-align: center;
		justify-content: center;
		align-items: center;
		/* #ifdef H5 */
		cursor: pointer;
		/* #endif */
	}

	.fui-del__box {
		position: absolute;
		right: 32rpx;
		bottom: 32rpx;
		width: 120rpx;
		height: 72rpx;
		background-color: #fff;
		border-radius: 16rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		align-items: center;
		justify-content: center;
	}

	.fui-del__box:active {
		background-color: #ddd;
	}

	.fui-custom__wrap {
		/* #ifndef APP-NVUE */
		width: 100%;
		display: flex;
		/* #endif */
		/* #ifdef APP-NVUE */
		width: 750rpx;
		/* #endif */
		height: 520rpx;
		flex-direction: row;
		position: relative;
	}

	.fui-icon__close {
		position: absolute;
		right: 32rpx;
		top: 32rpx;
	}

	.fui-op__list {
		flex: 1;
		/* #ifndef APP-NVUE */
		width: 100%;
		display: flex;
		box-sizing: border-box;
		/* #endif */
		flex-direction: row;
		flex-wrap: wrap;
		padding: 100rpx 44rpx 0;
	}

	.fui-op__item {
		width: 220rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		align-items: center;
		justify-content: center;
		margin-bottom: 32rpx;
	}

	.fui-op--img {
		width: 120rpx;
		height: 120rpx;
	}

	.fui-op--text {
		font-size: 28rpx;
		padding-top: 12rpx;
	}
</style>